import { EditOutlined } from '@ant-design/icons'
import { useBoolean } from '@gnlab/utils/env-react'
import { Tag } from 'antd'
import { useImperativeHandle, forwardRef } from 'react'
import { Actionable } from '@/desktop/components'
import ChooseExternalTags from '@/desktop/components/ChooseExternalTags'
import { type ExternalExtra } from '@/services/contact-types/externals'
import { splitContactId } from '@/services/contacts'
import { empty, spin } from '..'
import Edit from './edit'
import { useInfo, useTags, useDetectUpdateByClient } from './hooks'
import './index.module.less'

interface Props {
    contactId: string
}
export interface Ref {
    refresh: () => void
}

export default forwardRef<Ref, Props>(function ExtraInfo(props, ref) {
    const { contactId } = props
    const [ownerWxid] = splitContactId(contactId)
    const { base, extra, updateExtra, refresh: refreshInfo } = useInfo(contactId)
    const { boundTags, loadTags, refreshTags, bindTags } = useTags(contactId)

    useImperativeHandle(ref, () => ({ refresh: refreshInfo }))

    const onUpdateByClient = useCallback(() => {
        void refreshInfo()
        void loadTags()
    }, [refreshInfo, loadTags])
    useDetectUpdateByClient(contactId, onUpdateByClient)

    const [editing, startEdit, finishEdit] = useBoolean(false)
    const onEdited = useCallback(
        (updated: ExternalExtra) => {
            updateExtra(updated)
            finishEdit()
        },
        [finishEdit],
    )

    const [choosingTags, setChoosingTags] = useState(false)
    const tagsChoosed = useCallback(
        (choosed?: { id: string; name: string }[]) => {
            setChoosingTags(false)
            if (choosed) {
                bindTags(choosed)
            }
        },
        [bindTags],
    )

    const editExtra = extra ? (
        <Actionable>
            <div styleName="edit-extra" onClick={startEdit}>
                <EditOutlined />
            </div>
        </Actionable>
    ) : null

    return <>
        <section styleName="section-extra">
            <div className="row">
                <label>UserId</label>
                <div>{contactId}</div>
            </div>

            <div className="row">
                <label>性别</label>
                <div>{base?.sex !== undefined ? (base.sex === 1 ? '男' : '女') : spin}</div>
            </div>

            <div className="row" styleName="extra">
                <label>备注名</label>
                <div>{extra ? extra.remark : (base?.remark ?? '') || empty}</div>
                {editExtra}
            </div>

            <div className="row" styleName="extra">
                <label>企业</label>
                <div>{extra ? extra.corpRemark || empty : spin}</div>
                {editExtra}
            </div>

            <div className="row" styleName="extra desc">
                <label>描述</label>
                <div>{extra ? extra.describe : (base?.describe ?? '') || empty}</div>
                {editExtra}
            </div>

            <div className="row" styleName="extra phone">
                <label>电话</label>
                <div>
                    {extra ? (
                        extra.phoneList.length ? (
                            <ul>{extra.phoneList.map((item, index) => <li key={index}>{item}</li>)}</ul>
                        ) : (
                            empty
                        )
                    ) : (
                        spin
                    )}
                </div>
                {editExtra}
            </div>

            <div className="row" styleName="tags-row">
                <label>标签</label>
                <div>
                    {boundTags ? (
                        <>
                            <div styleName="tags">{boundTags.map(tag => <Tag key={tag.id}>{tag.name}</Tag>)}</div>
                            <Actionable>
                                <div styleName="actions">
                                    <a onClick={() => setChoosingTags(true)}>设置标签</a>
                                    <a onClick={async () => refreshTags()}>刷新标签</a>
                                </div>
                            </Actionable>
                        </>
                    ) : (
                        spin
                    )}
                </div>
            </div>
        </section>

        {boundTags ? (
            <ChooseExternalTags
                visible={choosingTags}
                title="设置客户标签"
                wxid={ownerWxid}
                choosed={boundTags.map(t => t.id)}
                onFinish={tagsChoosed}
            />
        ) : null}

        {extra ? (
            <Edit
                visible={editing}
                onClose={finishEdit}
                onEdited={onEdited}
                contactId={contactId}
                extra={extra}
            />
        ) : null}
    </>
})
